<template>
    <div class="foster">
        <div class="operate">
            <el-button type="primary" @click="addUser">寄养</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入用户查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>   
        </div>
        <div class="fosterTable">
            <el-table border :data="tableData"  v-loading="MainLoading" :element-loading-text="MainLoadingText" style="width: 100%">
                <el-table-column prop="serialId" label="单号" width="190" />
                <el-table-column label="照片" width="120">
                    <template #default="scope">
                        <img style="width: 40px;" :src=scope.row.jimagesBase64 />
                    </template>
                </el-table-column>
                <el-table-column prop="uname" label="用户名" width="150" />
                <el-table-column prop="bname" label="状态" width="150">
                    <template #default="scope">
                        <span v-if="scope.row.jstate==0"><i class="Statusflag" style="background-color: #e5f509;"></i>处理中</span>
                        <span v-else-if="scope.row.jstate==1"><i class="Statusflag" style="background-color: #ff0000;"></i>审核失败</span>
                        <span v-else><i class="Statusflag" style="background-color: #00ff08;"></i>审核通过</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="150" />
                <el-table-column label="状态" width="130">
                    <template #default="scope">
                        <span v-if="scope.row.pstate==0">进行中</span>
                        <span v-else-if="scope.row.pstate==1">完成</span>
                        <span v-else-if="scope.row.pstate==2">异常</span>
                    </template>
                </el-table-column>
                <el-table-column prop="jkind" label="种类" width="150" />
                <el-table-column prop="iphone" label="手机号" width="150" />
                <el-table-column prop="descrs" label="备注" width="190" />
                <el-table-column prop="createTime" label="时间" width="190" />
                <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" :disabled="scope.row.jstate != '2'" @click="handleClick(scope)">详情</el-button>
                    <el-button type="primary" size="small" :disabled="disabled" @click="SelectPetinfo(scope)">宠物</el-button>
                    <el-button type="primary" size="small" :disabled="!(user.Identify == 1)" @click="EditleClick(scope)">处理</el-button>
                    <el-button type="danger" size="small" @click="nowPay(scope.row)">付款</el-button>
                    <el-button type="danger" size="small" @click="deleteClick(scope)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="pagination.total" />
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="账号" v-if="flagStatus">
                        <el-input :disabled="flagStatus" v-model="fromData.lname" />
                    </el-form-item>
                    <el-form-item label="用户名" v-if="flagStatus">
                        <el-input :disabled="flagStatus" v-model="fromData.uname" />
                    </el-form-item>
                    <el-form-item label="种类">
                        <el-input :disabled="flagStatus" v-model="fromData.jkind" />
                    </el-form-item>
                    <el-form-item label="照片">
                        <div id="fileSelect">
                            <input :disabled="flagStatus" @change="getFile($event)" type="file" />
                            <span v-if="SrcImg==null">+</span>
                            <img style="width: 80px;" v-else :src="SrcImg" />
                        </div>
                    </el-form-item>
                    <el-form-item label="状态" v-if="flagStatus">
                        <el-select v-model="fromData.jstate" placeholder="请选择">
                            <el-option v-for="(item,index) in statusData" :key="index" :label="item.name" :value="item.jstate" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input :disabled="flagStatus" v-model="fromData.iphone" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="fromData.descrs" />
                    </el-form-item>
                    <el-form-item v-if="flagStatus" label="时间">
                        <el-input :disabled="flagStatus" v-model="fromData.createTime" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="drawer = false">取消</el-button>
                    </el-form-item>
                </el-form>
        </el-drawer>
        <el-dialog
            v-model="dialog.dialogImages"
            title="扫码付款"
            width="25%">
            <div>
                <div class="dialogImage">
                    <img :src="dialog.PictureSrc" />
                </div>
                <div class="dialogPrice">
                    价格：<span>{{dialog.realityPrice}}$</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessageBox,ElMessage  } from 'element-plus'
export default defineComponent({
    data(){
        return {
            searchName:'',
            disabled:true,
            flagStatus:false,
            MainLoading:false,
            MainLoadingText:"整在获取支付信息...",
            dialog:{
                dialogImages:null,
                PictureSrc:null,
                realityPrice:0
            },
            statusData:[
                {
                    name:"审核中",
                    jstate:'0'
                },{
                    name:"审核不通过",
                    jstate:'1'
                },{
                    name:"审核通过",
                    jstate:'2'
                }
            ],
            tableData:[{
                    "id":1,
                    "JImages":"",
                    "iphone":"12",
                    "pid":8,
                    "jkind":'犬科',
                    "descrs":'这是我新添加 的功能',
                    "jstate":'0',
                    "createTime":"2020-02-01"
                }],
            fromData:{
                "JImages":"",
                "iphone":"",
                "pid":'',
                "jkind":'',
                "descrs":'',
                "jstate":'0',
            },
            user:null,
            SrcImg:null,
            Title:'添加',
            drawer:false,
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            }
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
        if(this.user==null) return;
        this.user.Identify == 0?this.disabled=false:this.disabled = true;
        this.LoadData()
    },
    methods:{
        LoadData(){
            let self = this;
            let row = self.pageData();
            row.name = null;
            row.uid = this.user.Id;
            row.identify = this.user.Identify;
            self.$http.post(`${self.baseUrl}/foster/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        addUser(){
            this.fromData = this.initial();
            this.drawer = true;
            this.Title = "添加";
            this.flagStatus = false;
            this.SrcImg = null;
        },
        search(){
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.uid = this.user.Id;
            row.identify = this.user.Identify;
            self.$http.post(`${self.baseUrl}/foster/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        handleClick(msg){
            this.store.commit("FosterMessage",msg.row)
            this.route.push({path:"/fosterDetaile"})
        },
        EditleClick(msg){
            this.flagStatus = true;
            this.Title = "处理";
            this.drawer = true;
            this.fromData = msg.row;
            this.SrcImg = msg.row.jimagesBase64;
        },
        // 立即付款
        nowPay(msg,title="服务付款"){
            let self = this;
            if(msg.serialId==null||msg.price==null||self.user == null){
                ElMessage({
                    message:"请完善信息",
                    type:'warning'
                })
                console.table({
                    serialId:msg.serialId,
                    price:msg.price,
                    user:self.user
                })
                return;
            }
            let row = {
                uid:self.user.Id,
                title:title,
                serialId:msg.serialId,
                price:msg.price
            }
            self.MainLoading = true;
            self.$http.post(`${self.baseUrl}/pay`,row).then(res=>{
                if(res.data.code == "40004"){
                    ElMessage({
                        message:res.data.sub_msg,
                        type:'success'
                    })
                }else{
                    self.dialog.dialogImages = true;
                    self.dialog.PictureSrc = "data:image/jpeg;base64," + res.data.images;
                    self.dialog.realityPrice = res.data.price;
                }
                self.MainLoading = false;
            })
        },
        SelectPetinfo(msg){
            this.store.commit("FosterMessage",msg.row)
            this.route.push({path:"/Pet"})
        },
        deleteClick(row){
            let self = this;
            ElMessageBox.confirm(`确定要删除这条寄养记录吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/foster/deleteFoster?id=${row.row.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        clickChange(msg){
            this.pagination.current = msg;
            this.LoadData();
        },
        onSubmit(){
            let self = this;
            let f = new FormData();
            f.append("iphone",self.fromData.iphone);
            f.append("Pid",self.fromData.pid);
            f.append("JKind",self.fromData.jkind);
            f.append("descrs",self.fromData.descrs);
            f.append("jstate",self.fromData.jstate);
            if(self.fromData.JImages != null) f.append("JImages",self.fromData.JImages);
            if(this.flagStatus){
                // 更改
                f.append("Id",self.fromData.id)
                f.append("uid",self.fromData.uid);
                self.editMessage(f);
            }else{
                // 添加
                f.append("uid",self.user.Id);
                self.sumbitMessage(f);
            }
            this.drawer = false;
        },
        editMessage(d){
            let self = this;
            self.$http.post(`${self.baseUrl}/foster/updateFoster`,d).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"更改成功",
                        type:'success'
                    })
                    self.drawer = false;
                    self.LoadData()
                }
            })
        },
        sumbitMessage(d){
            let self = this;
            self.$http.post(`${self.baseUrl}/foster/addFoster`,d).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"申请成功，请等待",
                        type:'success'
                    })
                    self.drawer = false;
                    self.LoadData()
                }
            })
        },
        getFile(msg){
            let self = this;
            let file = msg.target.files[0];
            self.fromData.JImages = file;
            self.createImg(file)
        },
        createImg(file){
            let self = this;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcImg = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            return {
                "JImages":"",
                "iphone":"",
                "pid":'',
                "jkind":'',
                "descrs":'',
                "jstate":'0',
            }
        }
    }
})
</script>
<style scoped>
    .el-table{
        width: 100%;
        height: calc(576px - 5px);
    }
    .el-pagination{
        margin-top: 5px;
    }
    .search{
        float: right;
    }
    .fosterTable{
        margin-top: 16px;
    }
</style>
